<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-固定导航栏</title>
  <style>
    /* 样式初始化，清除默认的内外边距， * 星号表示选中所有标签 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 图片底部空白是预留给文字对齐的，现在要去掉这些空白 */
    img {
      /* 改变图片的垂直对齐方式：middle 和文字中对齐 */
      vertical-align: middle;

      /* 改变图片标签的显示模式也可解决 */
      /* display: block; */
    }

    .center {
      /* 文本居中对齐，图片中对齐也可以用 */
      text-align: center;
    }

    /* ======= 固定导航样式设计开始 ======= */
    nav {
      height: 83px;
    }

    .fixed {
      /* 固定定位：固定在浏览器 */
      position: fixed;
      /* 固定到顶部 */
      top: 0;
      /* 固定盒子设置和浏览器一样宽 */
      width: 100%;
    }
    /* ======= 固定导航样式设计结束 ======= */
  </style>
</head>

<body>
  <!-- 头部部分 -->
  <header class="center">
    <img src="./images/top.png" alt="">
  </header>
  <!-- 导航部分 - 需要做滚动固定 -->
  <nav class="center">
    <!-- 🚨套多了个带 id 名字的盒子，主要用于添加或移除 fixed 类名  -->
    <div id="fixedBox" class="">
      <img src="./images/nav.png" alt="">
    </div>
  </nav>
  <!-- 主体部分 -->
  <main class="center">
    <img src="./images/main.png" alt="">
  </main>
  <script>
    // 需求分析：
    //   1. 给整个文档绑定滚动事件
    //   2. 获取 nav 相对于浏览器的边界
    //   3. 边界值分支判断

    // document   文档
    // scroll     滚动事件
    document.addEventListener('scroll', function () {
      // console.log('滚')
      // 查找 nav 盒子
      var nav = document.querySelector('nav')
      // 获取 nav 盒子相对于浏览器的边界
      //   get         获取
      //   Bounding    边界
      //   Client      客户端(浏览器)
      //   Rect        矩形(盒子)
      var bianjie = nav.getBoundingClientRect()

      // console.log(bianjie.top)
      //    get        获取
      //    Element    元素
      //    By         通过
      //    Id         Id
      var fixedBox = document.getElementById('fixedBox')
      if (bianjie.top <= 0) {
        // 添加 fixed 类名，让盒子固定
        //   class      类名
        //   List       列表
        //   add        添加
        //   remove     删除
        fixedBox.classList.add('fixed')
      } else {
        // 删除 fixed 类名，让盒子回来
        fixedBox.classList.remove('fixed')
      }
    })

  </script>
</body>

</html>